<template>
  <base-modal
    class="sparepart-dialog-container"
    :title="$t('task.detail.components.chooseSparePart')"
    :show.sync="visible"
    width="800px"
  >
    <part-service-table ref="sparepartTable" :data="data" :colums="colums" :can-select-part="true" :part-config="partConfig" :card="card" :tableType="type" v-if="visible" />

    <div class="btn-group">
      <el-button type="primary" icon="el-icon-plus" plain size="mini" @click="addPart">{{$t('common.base.addModule', {module: ''})}}</el-button>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button :disabled="pending" @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" :disabled="pending" @click="submit">{{$t('common.base.submit')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
/* components */
import PartSeviceTable from './PartSeviceTable.vue';

export default {
  name: 'choose-part-dialog',
  props: {
    colums: {
      type: Array,
      default: () => ([])
    },
    // 备件配置
    partConfig: {
      type: Object,
      default: () => ({})
    },
    card: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pending: false,
      visible: false,
      data: []
    }
  },
  methods: {
    /**
    * @description 打开添加备件弹窗
    */
    open() {
      this.data = [];
      this.pending = false;
      this.visible = true;

      this.$nextTick(() => {
        // 默认添加一行数据
        this.addPart();
      })
    },
    /**
    * @description 关闭添加备件弹窗
    */
    close() {
      this.visible = false;
    },
    /**
    * @description 添加备件
    */
    addPart() {
      this.$refs.sparepartTable.add();
    },
    /**
    * @description 提交
    */
    submit() {
      this.$emit('submit', this.data);
    },
    togglePending(pending = false) {
      this.pending = pending;
    }
  },
  components: {
    [PartSeviceTable.name]: PartSeviceTable
  }
}
</script>

<style lang="scss" scoped>
.sparepart-dialog-container {
  ::v-deep .base-modal-body {
    padding: 16px 0 !important;
  }

  .btn-group {
    text-align: center;
    margin-top: 16px;

    .el-button {
      width: 72px !important;
      border-radius: $button-radius-base;
    }
  }
}
</style>